import React, {useState} from 'react'
import { DatePicker } from 'antd';
import { Button, Tooltip, Typography,Divider } from 'antd';
import { SearchOutlined,AlipayCircleOutlined } from '@ant-design/icons';
const { Text, Link, Paragraph  } = Typography;
export default function AntdCom() {
  //定义状态
  const [editableStr, setEditableStr] = useState('This is an editable text.');
  return (
    <div style={{ padding: 50 }}>
      <h2>初体验</h2>
      <DatePicker />
      <h2>按钮</h2>
      <Button type="primary">Primary Button</Button>
      <Tooltip title="搜索">
        <Button type="primary" shape="circle" icon={<SearchOutlined />} />
      </Tooltip>
      <Button type="primary" loading>
        Loading
      </Button>

      <h2>图标</h2>
      <AlipayCircleOutlined style={{fontSize: 50, color: 'rgb(24, 144, 255)'}} />

      <h2>排版</h2>
      <Text mark>Ant Design (mark)</Text>
      <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>
      <Paragraph copyable>520 节日快乐吧</Paragraph>

      <h2>分割线</h2>
      <Divider>我是有底线的</Divider>

      
    </div>
  )
}
